<template>
  <div>
    <div class="parent">
      <div class="child-input">
        <div>
          <label for="url-input" class="url-input-label">
            {{ name }}
          </label>
        </div>
        <input
          id="url-input"
          name="url-input"
          ref="url-input"
          type="text"
          class="input"
          aria-required="true"
          placeholder="http://mapchang.com/"></input>
      </div>
      <div class="child-button">
        <a-button type="primary" shape="round" @click="addUrl">Add URL</a-button>
      </div>
    </div>
    <div class="url-parent" v-for="(url, index) in urls" :key="index">
      <div class="url">{{ url }}</div>
      <div class="url-button">
        <a-button type="link" @click="deleteUrl(url)">Delete</a-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Urls',
  props: {
    name: {
      type: String,
      default: () => "URL"
    },
    urls: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    addUrl () {
      const newUrl = this.$refs['url-input'].value
      if (newUrl === "") { return }
      if (this.urls.indexOf(newUrl) < 0) {
        this.$emit("addUrl", [...this.urls, newUrl])
      }
      this.$refs['url-input'].value = ""
    },
    deleteUrl (url) {
      this.urls.splice(this.urls.indexOf(url), 1)
      this.$emit("deleteUrl", this.urls)
    }
  }
}
</script>

<style scoped lang="less">
.url-parent {
  margin-top: 18px;
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 24px;
  .url {
    margin-right: 12px;
    flex-grow: 1;
    min-width: 0;
    max-width: 100%;
    word-break: break-all;
  }
  .url-button {
    flex-shrink: 0;
    display: block;
    max-width: 100%;
  }
  //&:not(&:nth-of-type(1)) {
  //  border-color: #c6d2e1;
  //  border-style: solid;
  //  border-top-width: 1px;
  //}
}

.parent {
  display: flex;
  align-items: flex-end;
  .child-input {
    flex-grow: 1;
    min-width: 0;
    display: block;
    max-width: 100%;
  }
  .child-button {
    margin-left: 12px;
    flex-shrink: 0;
    display: block;
    max-width: 100%;
    margin-bottom: 3px;
  }
}

.url-input-label {
  margin-bottom: 6px;
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  font-weight: bold;
}

.input {
  box-shadow: inset 0 0 0 1px #c6d2e1;
  padding: 6px 12px;
  border-radius: 4px;
  transition: background-color 0.125s, box-shadow 0.125s;
  display: block;
  width: 100%;
  appearance: none;
  font-family: inherit;
  background: transparent;
  border: 0;
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  font-weight: normal;
  &:hover {
     box-shadow: inset 0 0 0 1px #4264fb;
   }
  &:focus-visible{
    outline: none;
  }
}

</style>
